import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {FilterFormMultiple, FilterFormSingle, SelectOption} from "../../../../packages";
import {createFilterOptions, iFilterOption, iFilterQueryParam} from "../../../../packages/components/FilterService/utils/filter.service.utils";
import {iFilterFormMultipleState} from "../../../../packages/components/FilterFormMultiple";
import {iFilterFormSingleState} from "../../../../packages/components/FilterFormSingle";
import {DemoLine} from "../../Demo/DemoLine";
import {iFilterConfigDate} from "../../../../packages/components/FilterService/filter/filter.date";
import {iFilterConfigSelect} from "../../../../packages/components/FilterService/filter/filter.select";

export const demo_1 = designPage(() => {

  const filterOptions: iFilterOption[] = createFilterOptions([
    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like', },
    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultSearch: true, defaultValue: ['2023-01-03', '2023-01-13'] },
    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
    {
      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
        renderOptions: () => <>
          <SelectOption children="Android" value="android"/>
          <SelectOption children="IOS" value="ios"/>
          <SelectOption children="Web" value="web"/>
          <SelectOption children="SSR" value="ssr"/>
          <SelectOption children="微前端" value="micro"/>
        </>
      } as iFilterConfigSelect
    },
    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
  ]);

  const onSearch = (data: iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }) => {
    console.log(data);
  };

  return () => (
    <DemoRow title="单个字段筛选">
      <DemoLine title="基本用法">
        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch}/>
      </DemoLine>
      <DemoLine title="隐藏字段选择器">
        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideFieldSelector/>
      </DemoLine>
      <DemoLine title="隐藏筛选类型选择器">
        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideHandlerSelector/>
      </DemoLine>
      <DemoLine title="隐藏搜索按钮">
        <FilterFormSingle filterOptions={filterOptions} onSearch={onSearch} hideSearchButton/>
      </DemoLine>
    </DemoRow>
  );
});

export const demo1 = designPage(() => {

  const filterOptions: iFilterOption[] = createFilterOptions([
    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'] },
    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
    {
      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
        renderOptions: () => <>
          <SelectOption children="Android" value="android"/>
          <SelectOption children="IOS" value="ios"/>
          <SelectOption children="Web" value="web"/>
          <SelectOption children="SSR" value="ssr"/>
          <SelectOption children="微前端" value="micro"/>
        </>
      } as iFilterConfigSelect
    },
    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
  ]);

  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
    console.log(data);
  };

  return () => (
    <DemoRow title="多字段筛选">
      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
    </DemoRow>
  );
});


export const demo__1 = designPage(() => {

  const filterOptions: iFilterOption[] = createFilterOptions([
    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {}, filterConfig: { formItemAttrs: { column: 2 } } },
    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like', filterConfig: { formItemAttrs: { column: 2 } } },
    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'] },
    { label: '更新时间', field: 'updateAt', filterType: 'date', filterHandler: 'eq' },
    { label: '日期', field: 'dateVal', filterType: 'date', filterHandler: 'range' },
    { label: '计数', field: 'count', filterType: 'number', filterHandler: 'range' },
    { label: '数字', field: 'numberVal', filterType: 'text', filterHandler: 'eq' },
    { label: '复选框', field: 'flag', filterType: 'text', filterHandler: 'eq' },
    {
      label: '下拉选择', field: 'selectVal', filterType: 'select', filterHandler: 'eq', filterConfig: {
        renderOptions: () => <>
          <SelectOption children="Android" value="android"/>
          <SelectOption children="IOS" value="ios"/>
          <SelectOption children="Web" value="web"/>
          <SelectOption children="SSR" value="ssr"/>
          <SelectOption children="微前端" value="micro"/>
        </>
      } as iFilterConfigSelect
    },
    { label: '长文本', field: 'longText', filterType: 'text', filterHandler: 'like' },
    { label: '父对象', field: 'parentName', filterType: 'text', filterHandler: 'eq' },
    { label: '省', field: 'provinceVal', filterType: 'text', filterHandler: 'eq' },
    { label: '市', field: 'cityVal', filterType: 'text', filterHandler: 'eq' },
    { label: '区', field: 'districtVal', filterType: 'text', filterHandler: 'eq' },
    { label: '选项值', field: 'ovVal', filterType: 'text', filterHandler: 'eq' },
  ]);

  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
    console.log(data);
  };

  return () => (
    <DemoRow title="多列字段">
      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch} column={2}/>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const filterOptions: iFilterOption[] = createFilterOptions([
    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'], filterConfig: { queryFieldMode: 'field' } as iFilterConfigDate },
  ]);

  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
    console.log(data);
  };

  return () => (
    <DemoRow title="Date FilterConfig field">
      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {

  const filterOptions: iFilterOption[] = createFilterOptions([
    { label: '文本', field: 'normalText', filterType: 'text', filterHandler: 'like', getQueryParam: ({ formData }) => !!formData.normalText ? ({ text: formData.normalText }) : {} },
    { label: '编号', field: 'id', filterType: 'text', filterHandler: 'like' },
    { label: '创建时间', field: 'createAt', filterType: 'date', filterHandler: 'range', defaultValue: ['2023-01-03', '2023-01-13'], filterConfig: { queryFieldMode: 'separate' } as iFilterConfigDate },
  ]);

  const onSearch = (data: iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }) => {
    console.log(data);
  };

  return () => (
    <DemoRow title="Date FilterConfig separate">
      <FilterFormMultiple filterOptions={filterOptions} onSearch={onSearch}/>
    </DemoRow>
  );
});
